<template>
  <el-menu active-text-color="#1890ff" background-color="#0f2950" class="menu" text-color="#a3b1cc" router
    :collapse="store" default-active="/">

    <el-menu-item class="logo" style="background-color: #367fa9;" index="/">
      <img style="vertical-align: middle" width="25" src="/favicon.ico">
      <template slot="title">
        <span class="title">
          XMXT
        </span>
      </template>
    </el-menu-item>

    <div class="user">
      <a>
        <!-- <span class="img"> -->
        <img style="vertical-align: middle" width="60" src="/favicon.ico">
        <!-- </span> -->
      </a>
      <div class="ulu">

        <ul>
          <li>姓名:{{ user.name }}</li>
          <li>T E l:{{ user.tal }}</li>
          <li>邮箱:{{ user.emily }}</li>
        </ul>
      </div>
    </div>


    <el-menu-item index="/">
      <template slot="title">
        
        <i class="el-icon-s-home"></i>
        <span> 首页</span>
        
      </template>
    </el-menu-item>

    <!-- 动态导航栏 数具来源后端查询 -->
    <el-submenu v-for="(m, index) in menuList" :index="m.path" :key="index">
      <template slot="title">
        <i class="el-icon-s-grid"></i>
        <span>{{ m.name }}</span>
      </template>

      <span v-for="(a, index2) in m.list">
        <el-submenu v-if="a.list" :index="m.path+a.path">
          <template slot="title">
           
            <i class="el-icon-s-promotion"></i>
            {{ a.name }}
          </template>
          <el-menu-item v-for="(b, index3) in a.list" :index="m.path+a.path+b.path">
            
            <i class="el-icon-moon-night"></i>
            <span>{{ b.name }}</span>
          </el-menu-item>

        </el-submenu>
        <el-menu-item v-else :index="m.path+a.path">
          <template slot="title">
            <i class="el-icon-s-promotion"></i>
            {{ a.name }}
          </template>
        </el-menu-item>


      </span>
    </el-submenu>

  </el-menu>
</template>
<script>
import {getUser,} from '@/util/store'
import {menuselect} from '@/api/menuRequest'


export default {
  data() {
    return {
      user: {
        naem: '',
        tal: '',
        
      },
      store: false,
      userType: null,
      menuList: [
        //   {
        //     name: "系统管理",
        //     list: [{
        //       name: "用户管理",
        //       list: [{ name: "查看用户" }]
        //     }, { name: "权限管理" }]
        //   },
        //   { name: "文件管理", list: [{ name: "上传文件" }, { name: "文件查看" }] }
        // 
      ],
    }
  },
  created() {
    // this.getMenu();/
    // this.getUser();
  },
  mounted() {
    this.getMenu();
    this.user = getUser();
    // this.userType = this.$api.getSession('type');
  },
  methods: {
      // getUser(){
      //   this.user = getUser();
      // },
    //获取菜单
    getMenu() {
      
       
      menuselect().then(res => {

        this.menuList = res.data;
      })

    

    //   this.menuList = [
    //     {
    //       name: "系统管理",
    //       path: "/admin",
    //       list: [{
    //         name: "用户管理",
    //         path: "/user",
    //         list: [{ name: "查看用户" ,
    //                   path: "/userSelect"}]
    //       }, { name: "权限管理",path: "/menu"  }]
    //     },
    //     { name: "文件管理",path: "/fileMg", list: [{ name: "上传文件" ,path: "/upFile" }, { name: "文件查看",path: "/fileSelect" }] }
    //   ];
    },


  }
}
</script>

<style>
.menu {
  margin: 0 0 0 0 !important;
  border-right: none !important;
  height: 100%;
}

.el-menu-item-group {
  background-color: #868686a4
}

.menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
  border: none;
}

.logo {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.title {
  font-weight: 600;
  color: aliceblue;
  margin-left: 10px;
  font-size: 18px;
  display: inline-block;
  vertical-align: middle;
}

.user {
  display: flex;
  justify-content: flex-start;
  /* text-align: center; */
  padding: 5px;
  white-space: nowrap;
  position: relative;
  width: 100%;
  padding: -2px;
  overflow: hidden;
}

.ulu {
  /* background-color: #ff0000; */

  /* padding: 5px 5px 5px 15px;  */
  /* line-height: 1; */
  /* position: absolute;
  left: 88px;
  top: 1px; */
  margin-left: 20px;
  padding-top: 8px;
  text-align: left;
  color: #a3b1cc;
  overflow: hidden;
}

.img {
  background-color: #1d0101;
  /* display: block; */
  /* padding-top: 20px; */
  /* margin-left: 30px; */
}



li {
  font-size: 12px;
  line-height: 18px;
  color: rgb(93, 196, 62);
  
}
/* li:nth-child(2){
  margin-left: 2px;
} */
</style>
